<template>
    <div
        class="carousel-container"
        ref="container"
        @mousemove="move"
        @mouseleave="leave"
    >
        <div class="bg" :style="position" ref="inner">
            <ImageLoader
                :src="data.bigImg"
                :duration="1500"
                :placeholder="data.midImg"
            />
        </div>
        <h2 ref="title">{{ data.title }}</h2>
        <p ref="desc">{{ data.description }}</p>
    </div>
</template>

<script>
import ImageLoader from "@/components/ImageLoader"

export default {
    mounted() {
        const container = this.$refs.container
        this.container = {
            width: container.offsetWidth,
            height: container.offsetHeight
        }
        const inner = this.$refs.inner
        this.inner = {
            width: inner.offsetWidth,
            height: inner.offsetHeight
        }
        // 刚进入页面，让鼠标挪到中心，界面也会到中心
        this.mouse_x = this.center.x
        this.mouse_y = this.center.y
    },
    components: {
        ImageLoader
    },
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            container: null,
            inner: null,
            mouse_x: 0,
            mouse_y: 0
        }
    },
    computed: {
        center() {
            return {
                x: this.container.width / 2,
                y: this.container.height / 2
            }
        },
        position() {
            if (!this.inner || !this.container) {
                return
            }
            const dis_width = this.inner.width - this.container.width,
                dis_height = this.inner.height - this.container.height
            //  坐标 / 容器尺寸 = 背景偏移量 / 容器与背景的尺寸差
            const dis_x = (this.mouse_x / this.container.width) * dis_width,
                dis_y = (this.mouse_y / this.container.height) * dis_height
            return `transform: translate(-${dis_x}px, -${dis_y}px)`
        }
    },
    methods: {
        show() {
            this.$refs.title.style.transform = "scaleX(1)"
            this.$refs.desc.style.transform = "scaleX(1)"
        },
        hide() {
            this.$refs.title.style.transform = ""
            this.$refs.desc.style.transform = ""
        },
        move(e) {
            const container = this.$refs.container.getBoundingClientRect()
            // getBoundingClientRect()  获取 dom 元素到视口的距离
            this.mouse_x = e.clientX - container.left
            this.mouse_y = e.clientY - container.top
        },
        leave() {
            // 移出时让背景回到中心
            this.mouse_x = this.center.x
            this.mouse_y = this.center.y
        }
    }
}
</script>

<style lang="less">
.carousel-container {
    position: relative;
    overflow: hidden;
    > * {
        position: absolute;
        text-shadow: 0 0 2px #000b, 0 0 4px #000b;
    }
    .bg {
        left: 0;
        top: 0;
        width: 130%;
        height: 130%;
        transition: 0.5s;
    }
    h2 {
        left: 50px;
        top: 47%;
        letter-spacing: 8px;
        font-size: 35px;
        font-weight: 500;
        font-family: 楷体;
        transition: 1s;
        transform: scaleX(0);
        transform-origin: left center;
    }
    p {
        left: 100px;
        top: 55%;
        letter-spacing: 5px;
        transition: 1.8s 1s;
        transform: scaleX(0);
        transform-origin: left center;
    }
}
</style>
